/*
 * @Author: 李明明
 * @Date: 2020-11-13 10:27:47
 * @LastEditTime: 2020-12-15 11:43:52
 * @LastEditors: 李明明
 * @Description: 音频播放器
 * @FilePath: /官网改版/web/lib/audio.js
 * @代码版权方：'政府采购信息网'
 */

$(function () {
  // 音频播放器
  var timeout;
  var audio = document.getElementsByClassName("audio");
  for (let i = 0; i < audio.length; i++) {
    audio = audio[i];
  }
  playCotrol();

  function clicks(i) {
    console.log(i);
    var audio = document.getElementsByClassName("audio");
    $(".audio_wrap .control")
      .eq(i)
      .click(function () {
        console.log(i);
        console.log(audio[i]);
        audio[i].play();
        if ($(".audio_wrap .control").eq(i).hasClass("play")) {
          $(".audio_wrap .control")
            .addClass("play iconbofang1")
            .removeClass("pause iconzanting");
          $(".audio_wrap .control")
            .eq(i)
            .addClass("pause iconzanting")
            .removeClass("play iconbofang1");
          
          for (let t = 0; t < audio.length; t++) {
            if (t == i) {
              audio[i].play();
            } else {
              audio[t].pause();
            }
          }
          dragMove(i);
        } else {
          $(".audio_wrap .control")
            .eq(i)
            .addClass("play iconbofang1")
            .removeClass("pause iconzanting");
          audio[i].pause();
        }
      });
  }

  function timeChange(time, timePlace, i) {
    var timePlace = document.getElementsByClassName(timePlace)[i];
    var minute = time / 60;
    var minutes = parseInt(minute);
    if (minutes < 10) {
      minutes = "0" + minutes;
    }
    var second = time % 60;
    seconds = parseInt(second);
    if (seconds < 10) {
      seconds = "0" + seconds;
    }
    var allTime = "" + minutes + "" + ":" + "" + seconds + "";
    timePlace.innerHTML = allTime;
  }

  function playCotrol() {
    var audio = document.getElementsByClassName("audio");
    for (let i = 0; i < audio.length; i++) {
      console.log(audio[i]);
      audio[i].addEventListener("loadeddata", function () {
        $(".control").eq(i).addClass("play");
        console.log(audio[i].duration);
        var allTime = audio[i].duration;
        timeChange(allTime, "total_time", i);
        setInterval(function () {
          var currentTime = audio[i].currentTime;
          $(".player_time").html(timeChange(currentTime, "player_time", i));
        }, 1000);
        clicks(i);
        sliders(i);
        speed(i);
        volume(i);
      });
      audio[i].addEventListener(
        "pause",
        function () {
          $("#control").addClass("play").removeClass("pause");
          if (audio[i].currentTime == audio[i].duration) {
            $(audio[i]).siblings('.play_btn').removeClass('iconzanting')
            $(audio[i]).siblings('.play_btn').addClass('iconbofang1')
            audio[i].stop();
            audio[i].currentTime = 0;
          }
        },
        false
      );
      audio[i].addEventListener(
        "play",
        function () {
          $("#control").addClass("pause").removeClass("play");
          dragMove(i);
        },
        false
      );
      audio[i].addEventListener(
        "ended",
        function () {
          $("#control")
            .addClass("play iconbofang1")
            .removeClass("pauseiconzanting");
          audio[i].currentTime = 0;
        },
        false
      );
    }
  }
  var setProgress = function (value, i) {
    var currentSec =
        parseInt(value % 60) < 10
          ? "0" + parseInt(value % 60)
          : parseInt(value % 60),
      ratio = (value / audio.duration) * 100;
    $(".timer")
      .eq(i)
      .html(parseInt(value / 60) + ":" + currentSec);
    $(".progress")
      .eq(i)
      .find(".pace")
      .css("width", ratio + "%");
    $(".progress")
      .eq(i)
      .find("a")
      .css("left", ratio + "%");
  };
  var updateProgress = function () {
    setProgress(audio.currentTime);
  };
  function sliders(i) {
    console.log(i);
    var audio = document.getElementsByClassName("audio");
    $(".progress")
      .eq(i)
      .find(".slider")
      .slider({
        step: 0.1,
        slide: function (event, ui) {
          console.log(i);
          $(this).addClass("enable");
          setProgress((audio[i].duration * ui.value) / 100, i);
          clearInterval(timeout);
        },
        stop: function (event, ui) {
          audio[i].currentTime = (audio[i].duration * ui.value) / 100;
          $(this).removeClass("enable");
          timeout = setInterval(updateProgress, 500);
        },
      });
  }

  function dragMove(i) {
    var audio = document.getElementsByClassName("audio");
    setInterval(function () {
      var ratio = (audio[i].currentTime / audio[i].duration) * 100;
      console.log(ratio);
      $(".progress")
        .eq(i)
        .find(".pace")
        .css("width", ratio + "%");
      $(".progress")
        .eq(i)
        .find("a")
        .css("left", ratio + "%");
    }, 500);
  }

  // 倍速
  $(".speed_wrap").on("mousedown", function (e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).find(".speed_list").css("display", "block");
  });
  $(document).on("mousedown", function (e) {
    $(".speed_list").css("display", "none");
  });
  $(".speed_list").on({
    mouseover: function () {
      $(this).show();
    },
    mouseout: function () {
      $(this).hide();
    },
  });
  function speed(i) {
    var audio = document.getElementsByClassName("audio");
    $(".speed_list")
      .eq(i)
      .find("li")
      .click(function () {
        audio[i].playbackRate = $(this).attr("data");
        $(this).css("color", "rgb(240, 143, 16)");
        $(this).siblings("li").css("color", "#ffffff");
      });
  }

  var volumes = localStorage.volume || 0.5;
  function volume(i) {
    var setVolume = function (value,i) {
      audio[i].volume = localStorage.volume = value;
      $(".volume").eq(i).find('.pace').css("width", value * 100 + "%");
      $(".volume").eq(i).find('.slidera').css("left", value * 100 + " % ");
    };
    var audio = document.getElementsByClassName("audio");
    $(".volume").eq(i).find('.slider')
      .slider({
        max: 1,
        min: 0,
        step: 0.01,
        value: volumes,
        slide: function (event, ui) {
          setVolume(ui.value,i);
          $(this).addClass("enable");
          $(".mute").removeClass("enable");
        },
        stop: function () {
          $(this).removeClass("enable");
        },
      })
      .children(".pace")
      .css("width", volumes * 100 + "%");
    $(".mute").click(function () {
      if ($(this).hasClass("enable")) {
        setVolume($(this).data("volume"),i);
        $(this).removeClass("enable");
      } else {
        $(this).data("volume", audio[i].volumes).addClass("enable");
        setVolume(0,i);
      }
    });
  }
});
